<template>
  <div class="content">
    <el-row style="height: 2em">
      <el-button type="danger" style="float: left; margin-right:1%" icon="el-icon-delete" circle  size="mini" v-show="is_delete === true" @click="GroupErase"></el-button>
      <el-button :type="ButtonType()" style="font-size: 10px; margin-left:-0.5px; float: left" size="mini" icon="el-icon-more" @click="CheckBoxVisible">{{func}}</el-button>
     
      <i v-show="back_icon === true" style="margin-left: 1%" class="el-icon-back" @click="ShowCollection"></i>
      <el-cascader style="float:right" v-model="value" size="mini" :options="options" @change="HandleChange"></el-cascader>
    </el-row>
    <div v-for="item in essaylist1" :key="item.id" style="font-size: 15px;" v-show="show_collection === true">
      <el-card shadow="hover">
        <div class="check" v-show="checkboxvis === true">

          <el-checkbox size="small" @change="AssertDelete(item.kid)" :checked="false" v-model="item.is_check"></el-checkbox>
        </div>
        <div class="essay">
          <el-row>
            <span style="font-size: 15px">{{item.num}}. {{item.title}}</span>
            <span ></span>
          </el-row>
          <span style="font-size: 12px">{{item.content}}</span>
          <br/>
          <span style="font-size: 12px; color:deepskyblue">发布作者: {{item.date}} </span>
=
          <br/>
          <hr/>
          <el-row style="height: 2em">
            <el-button type="warning" icon = "el-icon-close" style="font-size: 5px" size="mini" @click="DeleteFromCollection(item.kid)">取消发布</el-button>
            <el-button type="primary" icon = "el-icon-search" style="font-size: 5px" size="mini"  @click="dialogVisible = true">查看内容</el-button>
            <el-button type="success" icon = "el-icon-s-flag" style="font-size: 5px" size="mini" @click="cite(item.title, item.content)">引用</el-button>
          </el-row>
          <el-dialog
  title="内容"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>链接：{{item.url}}</span>
  <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
          </el-dialog>
        </div>
      </el-card>
      <br/>
    </div>
    <DeleteCollection v-show="show_delete === true" :dl="delete_essaylist"></DeleteCollection>
    <el-dialog title="引用" :visible.sync="dialogTableVisible">
      <el-table :data="reference_text">
        <el-table-column property="type" label="引用标准" width="150"></el-table-column>
        <el-table-column property="context" label="引文内容" width="500"></el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="copy(scope.row)" size="small" :data-clipboard-text="copyValue" class="btn1">复制</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import DeleteCollection from "./launched_deletefile.vue";
export default {
  name: "personalfile",
  components:{
    DeleteCollection,
  },
  props:['item_show'],
  mounted() {
    this.GetEssayList1essaylist();
  },
  data(){
    return{
      dialogVisible:false,
      essaylist1: [],
      testlist: [{id: 1, title: "Jack", content: "第一篇论文", num: 1, date: "2021-11-09", refertimes: 15362},
        {id: 2, title: "Sam", content: "第二篇论文", num: 2, date: "2021-12-07", refertimes: 20},
        {id: 3, title: "Monica", content: "第三篇论文", num: 3, date: "2008-11-07", refertimes: 1988},
        {id: 4, title: "Peter", content: "第四篇论文", num: 4, date: "2014-05-07", refertimes: 12},
        {id: 5, title: "Sam", content: "第二篇论文", num: 2, date: "2021-12-07", refertimes: 20},
        ],
      reference_text: [
        {
          type: "GB/T 7714-2015 格式引文",
          context: ""
        }, {
          type: "MLA格式引文",
          context: ""
        },
        {
          type: "APA格式引文",
          context: ""
        }
      ],
      eraselist: [],
      checkboxvis: false,
      func: '批量删除',
      is_delete: false,
      copyValue:"",
      centerDialogVisible: false,
      dialogTableVisible: false,
      value: [],
      options: [{value: "collectiondate", label:"收藏日期", children:[{value: "collectiondate_downseq", label:"日期降序"}, {value: "collectiondate_upseq", label:"日期升序"}]},
                {value: "refertimes", label:"被引用量", children:[{value: "refertimes_downseq", label:"引用量降序"}, {value: "refertimes_upseq", label:"引用量升序"}]}
      ],
      deleted: 0,
      delete_essaylist: [],
      show_delete: false,
      show_collection: true,
      back_icon: false,
      current_page: 1,
    }
  },
  methods:{
    getCookie(name) {
      var value = '; ' + document.cookie
      var parts = value.split('; ' + name + '=')
      if (parts.length === 2) return parts.pop().split(';').shift()
    },
    GetEssayList1essaylist(){
      const self = this;
      self.axios({
        method: 'post',
        url: '/show_file/',
        data: {
          user_id: this.$store.state.username,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        console.log(res.data);
        const obj = res.data;
        this.SetEssayList1essaylist(obj.essayCollection);
      }).catch(err => {
        console.log(err);
        this.SetEssayList1essaylist(this.testlist);
        this.$message("获取发布文献信息失败，展示样例")
      })
    },
    SetEssayList1essaylist(list){
      let i;
      this.essaylist1.splice(0, this.essaylist1.length);
      for(i = 0; i < list.length; i++){
        this.essaylist1.push({id: i + 1, title: list[i].title, content: list[i].zhaiyao, num: i + 1,kid:list[i].id, date: list[i].name,  is_check: false,url:list[i].url});
      }
    },
    DeleteFromCollection(v){
      /*let i, j;
      for(i = 0; i < this.essaylist.length; i++){
        if(this.essaylist[i].id === v){
          j = i;
          break;
        }
      }
      this.delete_essaylist[this.deleted] = this.essaylist[j];
      this.delete_essaylist[this.deleted].num = this.deleted + 1;
      this.delete_essaylist[this.deleted].id = this.deleted + 1;
      this.essaylist.splice( j, 1);
      this.deleted++;
      for(i = j; i < this.essaylist.length; i++){
        this.essaylist[i].num--;
      }*/

      //批量删除就是多次调用DeleteSingle
      this.DeleteSingle(v);
    },
    //for connection
    //update DeleteFromCollection
    DeleteSingle(v){
      const self = this;
      console.log(v+ this.$store.state.username)
      self.axios({
        method: 'post',
        url: '/deletefile/',
        data: {
          user_id: this.$store.state.username,
          delete_id: v,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        console.log(res.data);
        const obj = res.data;
        if(obj.code === 1){
          //重新获取文献列表
          this.GetEssayList1essaylist();
        }
        else{
          this.$message("删除收藏项失败");
        }
      }).catch(err => {
        console.log(err);
        this.$message("删除操作失败")
      })
    },
    CheckBoxVisible(){
      if(this.checkboxvis === false){
        this.func = "取消选择";
        this.is_delete = true;
        this.checkboxvis = true;
      }
      else{
        this.func = "批量选择";
        this.is_delete = false;
        this.checkboxvis = false;
      }
    },
    ButtonType(){
      if(this.checkboxvis){
        return "danger";
      }
      else{
        return "info";
      }
    },
    AssertDelete(v){
      this.eraselist.push(v);
    },
    GroupErase(){
      let i;
      //eraselist里存的是要删除文献的id
      for(i = 0; i < this.eraselist.length; i++){
        this.DeleteFromCollection(this.eraselist
[i]);
      }
      this.eraselist.splice(0, this.eraselist.length);
    },
    copy(row) {
      const btnCopy = new Clipboard('.btn1');
      this.copyValue = row.context;
      this.$message({
        message: '成功复制引用文本',
        type: 'success'
      });
    },
    cite(title, content) {
      let i = 0;
      for(i = 0; i < this.reference_text.length; i++){
        this.reference_text[i].context = title + content;
      }
      this.dialogTableVisible = true;
    },
    Swap(i, j){
      let t_title, t_content, t_date, t_refertimes;
      t_title = this.essaylist1[i].title;
      t_content = this.essaylist1[i].content;
      t_date = this.essaylist1[i].date;
      t_refertimes = this.essaylist1[i].refertimes;

      this.essaylist1[i].title = this.essaylist1[j].title;
      this.essaylist1[i].content = this.essaylist1[j].content;
      this.essaylist1[i].date = this.essaylist1[j].date;
      this.essaylist1[i].refertimes =  this.essaylist1[j].refertimes;

      this.essaylist1[j].title = t_title;
      this.essaylist1[j].content = t_content;
      this.essaylist1[j].date = t_date;
      this.essaylist1[j].refertimes = t_refertimes;

    },
    TimeOrder(v){
      let i, j;
      if(v === 0){
        for(i = 0; i < this.essaylist1.length - 1; i++){
          for(j = 0; j < this.essaylist1.length - i -1; j++){
            let date_1 = this.essaylist1[j].date.split("-");
            let date_2 = this.essaylist1[j + 1].date.split("-");
            if(parseInt(date_1[0]) < parseInt(date_2[0])){
              this.Swap(j, j + 1);
            }
            else if((parseInt(date_1[0]) === parseInt(date_2[0])) && (parseInt(date_1[1]) < parseInt(date_2[1]))){
              this.Swap(j, j + 1);
            }
            else if((parseInt(date_1[1]) === parseInt(date_2[1])) && (parseInt(date_1[2]) < parseInt(date_2[2]))){
              this.Swap(j, j + 1);
            }
          }
        }
      }
      else{
        for(i = 0; i < this.essaylist.length - 1; i++){
          for(j = 0; j < this.essaylist.length - i -1; j++){
            let date_1 = this.essaylist[j].date.split("-");
            let date_2 = this.essaylist[j + 1].date.split("-");
            if(parseInt(date_1[0]) > parseInt(date_2[0])){
              this.Swap(j, j + 1);
            }
            else if((parseInt(date_1[0]) === parseInt(date_2[0])) && (parseInt(date_1[1]) > parseInt(date_2[1]))){
              this.Swap(j, j + 1);
            }
            else if((parseInt(date_1[1]) === parseInt(date_2[1])) && (parseInt(date_1[2]) > parseInt(date_2[2]))){
              this.Swap(j, j + 1);
            }
          }
        }
      }
    },
    ReferTimesOrder(v){
      let i, j;
      if(v === 0){
        for(i = 0; i < this.essaylist.length - 1; i++){
          for(j = 0; j < this.essaylist.length - i - 1; j++){
            if(this.essaylist[j].refertimes < this.essaylist[j + 1].refertimes){
              this.Swap(j, j + 1);
            }
          }
        }
      }
      else{
        for(i = 0; i < this.essaylist.length - 1; i++){
          for(j = 0; j < this.essaylist.length - i - 1; j++){
            if(this.essaylist[j].refertimes > this.essaylist[j + 1].refertimes){
              this.Swap(j, j + 1);
            }
          }
        }
      }
    },
    HandleCommand(command){
      if(command === 'b'){
        this.ReferTimesOrder();
     }
      else if(command === 'a'){
        this.TimeOrder();
      }
    },
    HandleChange(value){
      if(value[1] === "collectiondate_downseq"){
        this.TimeOrder(0);
      }
      else if(value[1] === "collectiondate_upseq"){
        this.TimeOrder(1);
      }
      else if(value[1] === "refertimes_downseq"){
        this.ReferTimesOrder(0);
      }
      else{
        this.ReferTimesOrder(1);
      }
    },
    ShowDeleted(){
      this.show_delete = true;
      this.show_collection = false;
      this.back_icon = true;
    },
    ShowCollection(){
      this.show_delete = false;
      this.show_collection = true;
      this.back_icon = false;
    },
    CurrentChange(currentPage){
      this.current_page = currentPage;
    },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
}
</script>

<style scoped>
.content{
  width: 38em;
}
.check{
  width: 1em;
  float: left;
}
.essay{
  width:35em;
  margin-left:5%;
}
</style>